<template>

    <view>
    <nut-navbar
      @on-click-back="back"
      @on-click-title="title"
      @on-click-right="rightClick"
      title="报警信息"
    >
      <template #right>
      <nut-icon class="right" name="del2"></nut-icon>
      </template>
    </nut-navbar>
  </view>

  <view>  
	  <view class="alarm-list">
	  	<view class="alarm-list-item" v-for="item in 4" :key="item">
	  		<view class="alarm-list-item__head">
	  			<text class="alarm-list-item__head-tit">未装药盒报警</text>
	  			<text class="alarm-list-item__head-date">2022-07-12 18:09</text>
	  		</view>
	  		<view class="alarm-list-item__body">
	  			<text class="alarm-list-item__body-name">杨智军 </text>
	  			<view class="alarm-list-item__body-divide"></view>
	  			<text class="alarm-list-item__body-code"> 730003821 </text>
	  		</view>
	  	</view>
	  </view>
  </view>
</template>

<script>
  
</script>

<style lang="scss">
	.alarm-list {
		padding: 20rpx;
		&-item {
			margin-bottom: 60rpx;
			&__head {
				display: flex;
				justify-content: space-between;
				margin-bottom: 10rpx;
				&-tit {
					font-size: 22rpx;
					color: #E43C3C;
					letter-spacing: 0;
					line-height: 20px;
					font-weight: 600;
				}
				&-date {
					font-size: 14rpx;
					color: #a0a5b0;
					letter-spacing: 0;
					text-align: right;
					line-height: 20px;
					font-weight: 400;
				}
			}
			&__body {
				display: flex;
				&-name {
					font-size: 12px;
					color: #333333;
					letter-spacing: 0;
					line-height: 16px;
					font-weight: 400;
				}
				&-divide {
					position: relative;
					width: 1rpx;
					height: 16rpx;
					background-color: red;
					margin: 1rpx 8rpx 0;
				}
				&-code {
					font-size: 12px;
					color: #333333;
					letter-spacing: 0;
					line-height: 16px;
					font-weight: 400;
				}
			}
		}
	}
</style>
